<template>
    <div class="box-item">
        <div class="box-title">设备管理</div>
        <div class="box-body">
            <div class="sb">设备总数：<span class="ext">623个</span></div>
            <div class="chart-container">
                <Echart id="charts_top1" :options="options" class="left_center_inner" ref="charts1" height="300px" />
                <div class="bg"></div>
            </div>
        </div>
    </div>
</template>

<script>
import { getPie3D, getParametricEquation } from '@/utils/chart'; //工具类js，页面路径自己修改

export default {
    name: 'PackRTL',
    data() {
        return {
            options: {},
            optionData: [
                {
                    name: '国四',
                    value: 58,
                    itemStyle: {
                        color: '#D13DF2',
                    },
                },
                {
                    name: '国五',
                    value: 12,
                    itemStyle: {
                        color: '#6A43F3',
                    },
                },
                {
                    name: '国六',
                    value: 24,
                    itemStyle: {
                        color: '#6CCEE6',
                    },
                },
                {
                    name: '国七',
                    value: 34,
                    itemStyle: {
                        color: '#284DF3',
                    },
                },
            ],
        };
    },
    created() {
        this.getData();
    },
    mounted() { },
    beforeDestroy() { },
    methods: {
        getData() {
            let legend = {
                // orient: "horizontal",
                bottom: '5%',
                left: '8%',
                itemGap: 5, // 设置图例之间的间距为20像素
                formatter: function (param) {
                    return param;
                },
            };
            // 传入数据生成 option, 构建3d饼状图, 参数工具文件已经备注的很详细
            const options = getPie3D(this.optionData, 0.05, 600, 25, 20, 0.9, legend);

            this.options = options;
        },
    },
};
</script>

<style lang="scss" scoped>
.box-item {
    width: 300px;
    height: 380px;
    background: url('../../../assets/img/launch/pack/pack_box_bg1.png') no-repeat center;
    background-position: center center;
    background-size: 100% 100%;
    margin-bottom: 25px;

    .box-title {
        position: relative;
        height: 55px;
        line-height: 55px;
        text-indent: 1em;
        font-size: 16px;

        &::after {
            position: absolute;
            top: -2px;
            content: url('../../../assets/img/launch/pack/pack_nav.png');
        }
    }

    .box-body {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        height: 320px;

        .sb {
            width: 260px;
            height: 80px;
            background: url('../../../assets/img/launch/pack/pack_box.png') no-repeat center;
            background-position: center center;
            background-size: 260px 80px;
            line-height: 80px;
            text-align: center;

            .ext {
                color: #ffab07;
                font-weight: 600;
                font-size: 26px;
            }
        }

        .chart-container {
            position: relative;
            width: 100%;
            height: 230px;

            .left_center_inner,
            .bg {
                width: 100%;
                height: 100%;
            }

            .left_center_inner {
                left: 5px;
                top: -75px;
                z-index: 1;
                // border: 1px solid red;
            }

            .bg {
                position: absolute;
                bottom: 50px;
                left: 53%;
                background: url('../../../assets/img/launch/pie_bg.png') no-repeat center;
                background-size: 85% 85%;
                transform: translateX(-50%);
            }
        }
    }
}
</style>